<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多层组件</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/compiler-dom/dist/compiler-dom.global.js"></script>

<script>
  const {
    baseCompile
  } = VueCompilerDOM;

  console.log('VueCompilerDOM:',VueCompilerDOM);

  //写template相较于jsx具备优化特点
  //patchFlag + blockTree 能做到靶向更新

  //整体流程如下
  //1. html -> ast
  //2. transform: 转化ast树 加标记和进行优化
  //3. codegen: 生成render函数

  //https://astexplorer.net/
  //https://vue-next-template-explorer.netlify.app

  // const ast = baseCompile('hello<div></div> {{name}}');

  /** case1 */
  /*const ast = baseCompile(`he

  llow`);

  console.log('ast:',ast)*/


  /** case2 */
  /*const ast = baseCompile(`{{      name  }}`);

  console.log('ast:',ast)*/


  /** case3 */
  /*const ast = baseCompile(`<div><p>hello</p> {{name}} 123</div>`);
  console.log('ast:',ast)*/


  /** case4 生成的ast会套一个根节点（即使我们只写了一个根元素 也会套一个）*/
  /*const ast = baseCompile(`<div>123
<p>hello {{age}}</p>
{{name}} 123
</div>`);
  console.log('ast:',ast)*/

  /**/
  /*const ast = baseCompile(`<div>
HELLO <p>123</p> {{hello}}
</div>`);
  console.log('ast:',ast)*/

  const generateCode = baseCompile(`<div>hi</div><div>nihao</div>`);
  console.log('generateCode:',generateCode)
</script>
</body>
</html>
